<template>
  <div class="finance-page">
    <h1>财务管理</h1>

    <!-- 财务概览卡片 -->
    <div class="finance-overview">
      <FinanceOverviewCard
        title="总收益金额"
        :value="formatCurrency(financeData.totalRevenue)"
        icon="chart-line"
        color="success"
      />
      <FinanceOverviewCard
        title="总提款金额"
        :value="formatCurrency(financeData.totalWithdrawAmount)"
        icon="money-check-alt"
        color="primary"
      />
      <FinanceOverviewCard
        title="待放款金额"
        :value="formatCurrency(financeData.pendingWithdrawAmount)"
        icon="hourglass-half"
        color="warning"
      />
    </div>

    <div class="finance-content">
      <div class="finance-menu">
        <router-link to="/admin/finance/withdrawals" class="menu-item">提现审核</router-link>
        <!-- <router-link to="/admin/finance/transactions" class="menu-item">交易记录</router-link> -->
        <!-- 未来可添加其他财务相关菜单项 -->
      </div>
      <div class="finance-router-view">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import FinanceOverviewCard from '@/components/admin/finance/FinanceOverviewCard.vue';
import { GetPayAndEditApi } from '@/api/index'

// 格式化货币显示
const formatCurrency = (value: number) => {
  return `${value.toLocaleString()} USDT`;
};

const financeData = reactive({
  totalRevenue: '',
  totalWithdrawAmount: '',
  pendingWithdrawAmount: '',
})

// 获取统计数据
const getStatisticsDataRequest = async () => {
  try {
    const res = await GetPayAndEditApi({})

    financeData.totalRevenue = res.data.orderMoneyNum

    financeData.totalWithdrawAmount = res.data.payWithdrawalMoneyNum

    financeData.pendingWithdrawAmount = res.data.payWaitWithdrawalMoneyNum
  } catch(err) {
    console.log('getStatisticsDataRequest', err)
  }
}

// 组件挂载时加载数据
onMounted(() => {
  getStatisticsDataRequest()
});
</script>

<style scoped>
.finance-page {
  padding: 20px;
}

.finance-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.finance-content {
  margin-top: 20px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.finance-menu {
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.menu-item {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 4px;
  transition: all 0.3s;
}

.menu-item:hover, .router-link-active {
  background-color: #f0f9ff;
  color: #409eff;
}

.finance-router-view {
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .finance-overview {
    grid-template-columns: 1fr;
  }
}
</style>
